﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            if(!location.hash.replace('#', '').length) {
                location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
                location.reload();
            }
        </script>

        <title>WebRTC One-to-Many Video-Broadcasting | Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script>
            var hash = window.location.hash.replace('#', '');
            if (!hash.length) location.href = location.href + '#meeting-roomid-' + ((Math.random() * new Date().getTime()).toString(36).toLowerCase().replace(/\./g, '-'));
        </script>
        <style>
			@import url(https://fonts.googleapis.com/css?family=Ubuntu:300);
            html { background: #eee; }

            body {
                font-family: "Ubuntu", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
				font-size: 1.2em;
				line-height: 1.5em;
                margin: 0;
            }

            body {
                background: #fff;
                border: 1px solid;
                border-color: #ddd #aaa #aaa #ddd;
                border-radius: 5px;
                margin: .5em auto 0 auto;
                padding: .8em;
                padding-top: 0;
            }

            h1, h2 {
                border-bottom: 1px solid black;
                display: inline;
                font-weight: normal;
                line-height: 36px;
                padding: 0 0 3px 0;
            }

            h1 {
                background: rgb(238, 238, 238);
                border-bottom-width: 2px;
                display: block;
                margin-top: 0;
                padding: .3em;
                text-align: center;
            }

            :-moz-any-link:focus {
                border: 0;
                color: #000;
            }

            ::selection { background: #ccc; }

            ::-moz-selection { background: #ccc; }

            button {
                -moz-border-radius: 3px;
                -moz-transition: none;
                -webkit-transition: none;
                background: #0370ea;
                background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
                background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
                border: 1px solid #076bd2;
                border-radius: 3px;
                color: #fff;
                display: inline-block;
                font-family: inherit;
                font-size: .8em;
                line-height: 1.3;
                padding: 5px 12px;
                text-align: center;
                text-shadow: 1px 1px 1px #076bd2;
            }

            button:hover { background: rgb(9, 147, 240); }

            button:active { background: rgb(10, 118, 190); }

            button[disabled] {
                background: none;
                border: 1px solid rgb(187, 181, 181);
                color: gray;
                text-shadow: none;
            }

            #videos-container video { width: 40%; }

            footer { text-align: center; }

            code {
                color: rgb(204, 14, 14);
                font-family: inherit;
            }

            audio, video { vertical-align: bottom; }

            pre {
                border-left: 2px solid red;
                margin-left: 2em;
                padding-left: 1em;
            }
        </style>
        <script src="https://www.webrtc-experiment.com/socket.io.js"></script>
        <script src="https://www.webrtc-experiment.com/one-to-many-video-broadcasting/meeting.js"> </script>
    </head>
    <body>
        <h1>
            WebRTC One-to-Many Video-Broadcasting / <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/broadcast" target="_blank">Source Code</a>
        </h1>
        <p>
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
            </p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>
        <section>
            <h2>Setup a new meeting:</h2>

            <button id="setup-new-meeting">Setup New Meeting</button>
        </section>
        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td>
                    <h2 style="display: block; text-align: center;">
                        Local Media Stream</h2>
                    <section id="videos-container"></section>
                </td>
            </tr>
        </table>
        <script>
            var hash = window.location.hash.replace('#', '');
            var meeting = new Meeting(hash);

            var videoContainer = document.getElementById('videos-container');

            var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
                var sender = Math.round(Math.random() * 999999999) + 999999999;

                var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
                io.connect(SIGNALING_SERVER).emit('new-channel', {
                    channel: channel,
                    sender: sender
                });

                var socket = io.connect(SIGNALING_SERVER + channel);
                socket.on('connect', function () {
                    // setup peer connection & pass socket object over the constructor!
                });

                socket.send = function (message) {
                    socket.emit('message', {
                        sender: sender,
                        data: message
                    });
                };

                meeting.openSignalingChannel = function(callback) {
                    return socket.on('message', callback);
                };

        // on getting media stream
            meeting.onaddstream = function(e) {
                videoContainer.appendChild(e.video);
            };

        // using firebase for signaling
            meeting.firebase = 'rtcweb';

        // if someone leaves; just remove his video
            meeting.onuserleft = function(userid) {
                var video = document.getElementById(userid);
                if (video) video.parentNode.removeChild(video);
            };

        // check pre-created meeting rooms
            meeting.check();

            document.getElementById('setup-new-meeting').onclick = function() {
                // setup new meeting room
                meeting.setup('meeting room name');
                this.disabled = true;

                this.parentNode.innerHTML = '<h2><a href="' + location.href + '" target="_blank">Share this link</a></h2>';
            };
        </script>
		<br />
        <br />
		<p>If 10 users join your broadcasted room, <strong>40 RTP ports</strong> will be opened on your browser:</p>
		<ol>
			<li>10 RTP ports for <strong>outgoing</strong> audio streams</li>
			<li>10 RTP ports for <strong>outgoing</strong> video streams</li>
			<li>10 RTP ports for <strong>incoming</strong> audio streams</li>
			<li>10 RTP ports for <strong>incoming</strong> video streams</li>
		</ol>
		<h2>Difference between one-way broadcasting and one-to-many broadcasting</h2>
		<p>For 10 users session, in one-way broadcasting:</p>
		<ol>
			<li>10 RTP ports for outgoing audio stream</li>
			<li>10 RTP ports for outgoing video stream</li>
		</ol>
		<p>i.e. total 20 <strong>outgoing</strong> RTP ports will be opened on your browser.</p>
		<p>On each participant's side; only 2 <strong>incoming</strong> RTP ports will be opened.</p>
		<p>Unlike one-way broadcasting; one-to-many broadcasting experiment opens both outgoing as well as incoming RTP ports for each participant.</p>
		
        <br />
        <br />
        <pre>
&lt;script src="https://www.webrtc-experiment.com/one-to-many-video-broadcasting/meeting.js"&gt;&lt;/script&gt;
</pre>
        <pre>
var meeting = new Meeting('meeting-unique-id');

// on getting local or remote streams
meeting.onaddstream = function(e) {
    // e.type == 'local' ---- it is local media stream
    // e.type == 'remote' --- it is remote media stream
    document.body.appendChild(e.video);
};

// custom signaling channel
// you can use each and every signaling channel
// any websocket, socket.io, or XHR implementation
// any SIP server
// anything! etc.
meeting.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

// check pre-created meeting rooms
// it is useful to auto-join
// or search pre-created sessions
meeting.check();

document.getElementById('setup-new-meeting').onclick = function() {
    meeting.setup('meeting room name');
};

// if someone leaves; just remove his video
meeting.onuserleft = function(userid) {
    var video = document.getElementById(userid);
    if(video) video.parentNode.removeChild(video);
};
</pre>
        <br />
        <br />
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
        <footer>
            <p> <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> © <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span>2013 </span> » <a href="mailto:muazkh@gmail.com" target="_blank">Email</a> » <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a> » <a href="https://github.com/muaz-khan" target="_blank">Github</a></p>
        </footer>
        <script src="https://www.webrtc-experiment.com/common.js"> </script>
    </body>
</html>